<template>
  <div class="view-divider">
    <fx-card title="垂直分割线">
      <div>
        路飞
        <fx-divider type="vertical"/>
        索隆
        <fx-divider type="vertical"/>
        山治
      </div>
      <template #hide>
        <pre v-highlight="vertical"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="水平分割线">
      <p>海贼王</p>
      <fx-divider/>
      <p>海贼王</p>
      <fx-divider :dashed="dashed" :orientation="orientation">路飞</fx-divider>
      <fx-radio-group v-model="orientation" class="mr10">
        <fx-radio-button label="left">left</fx-radio-button>
        <fx-radio-button label="center">center</fx-radio-button>
        <fx-radio-button label="right">right</fx-radio-button>
      </fx-radio-group>
      <fx-switch v-model="dashed" close-text="solid" open-text="dashed"/>
      <template #hide>
        <pre v-highlight="horizontal"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义颜色">
      <div>
        路飞
        <fx-divider type="vertical" color="#f60"/>
        索隆
        <fx-divider type="vertical" color="#f69"/>
        山治
      </div>
      <fx-divider color="red">路飞</fx-divider>
      <fx-divider dashed color="blue">路飞</fx-divider>
      <template #hide>
        <pre v-highlight="color"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义间距">
      <div class="mb20">
        <div class="mb20">
          路飞
          <fx-divider type="vertical" :margin="verticalMargin+verticalUnit"/>
          索隆
          <fx-divider type="vertical" :margin="verticalMargin+verticalUnit"/>
          山治
        </div>
        <fx-input-number v-model="verticalMargin" width="120" :min="0" class="mr5"/>
        <fx-select v-model="verticalUnit" width="80" placeholder="请选择">
          <fx-option label="px" value="px"/>
          <fx-option label="rem" value="rem"/>
          <fx-option label="em" value="em"/>
          <fx-option label="vw" value="vw"/>
        </fx-select>
      </div>
      <div>
        <div class="mb20">
          海贼王
          <fx-divider :margin="margin+unit">路飞</fx-divider>
          海贼王
          <fx-divider dashed :margin="margin+unit">路飞</fx-divider>
        </div>
        <fx-input-number v-model="margin" width="120" :min="0" class="mr5"/>
        <fx-select v-model="unit" width="80" placeholder="请选择">
          <fx-option label="px" value="px"/>
          <fx-option label="rem" value="rem"/>
          <fx-option label="em" value="em"/>
          <fx-option label="vh" value="vh"/>
        </fx-select>
      </div>
      <template #hide>
        <pre v-highlight="marginCode"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'viewDivider',
  setup () {
    const dashed = ref<boolean>(false)
    const orientation = ref<string>('center')
    const verticalMargin = ref<number>(10)
    const verticalUnit = ref<string>('px')
    const margin = ref<number>(10)
    const unit = ref<string>('px')

    const vertical = `<div style="background-color: #fff">
  路飞
  <fx-divider type="vertical"/>
  索隆
  <fx-divider type="vertical"/>
  山治
</div>`
    const horizontal = `<p>海贼王</p>
<fx-divider/>
<p>海贼王</p>
<fx-divider :dashed="dashed" :orientation="orientation">路飞</fx-divider>
<fx-radio-group v-model="orientation" class="mr10">
  <fx-radio-button label="left">left</fx-radio-button>
  <fx-radio-button label="center">center</fx-radio-button>
  <fx-radio-button label="right">right</fx-radio-button>
</fx-radio-group>
<fx-switch v-model="dashed" close-text="solid" open-text="dashed"/>`
    const color = `<div>
  路飞
  <fx-divider type="vertical" color="#f60"/>
  索隆
  <fx-divider type="vertical" color="#f69"/>
  山治
</div>
<fx-divider color="red">路飞</fx-divider>
<fx-divider dashed color="blue">路飞</fx-divider>`
    const marginCode = `<div>
  路飞
  <fx-divider type="vertical" margin="2"/>
  索隆
  <fx-divider type="vertical" margin="10vw"/>
  山治
</div>
海贼王
<fx-divider margin="10px">路飞</fx-divider>
海贼王
<fx-divider dashed margin="10vh">路飞</fx-divider>`

    return {
      dashed,
      orientation,
      vertical,
      horizontal,
      color,
      marginCode,
      verticalMargin,
      verticalUnit,
      margin,
      unit
    }
  }
})
</script>

<style scoped lang="scss">
.view-divider {
}
</style>
